/** @format */

import React, {Component} from 'react';

import styles from '../Styles/main';
import MovieDetail from './MovieDetail';

import {
  Text,
  View,
  NavigatorIOS,
  ListView,
  TouchableHighlight,
  Image,
  ActivityIndicator,
} from 'react-native';

const REQUEST_URL = 'https://api.douban.com/v2/movie/search'

class SearchResult extends React.Component {
  constructor(props) {
    super(props);

    this.dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 != row2
    });

    this.state = {
      movies: this.props.results.subjects,
      total: this.props.results.total,
      count: this.props.results.count,
      start: this.props.results.count,
      query: this.props.query
    }
  }

  requestURL(
    url = REQUEST_URL,
    count = this.state.count,
    start = this.state.start,
    query = this.state.query,
  ) {
    //console.log(`${url}?q=${query}&count=${count}&start=${start}`)
    return `${url}?q=${query}&count=${count}&start=${start}`;
  }

  showMovieDetail(movie) {
    this.props.navigator.push({
      title: movie.title,
      component: MovieDetail,
      passProps: {movie},
    });
  }

  renderMovieList(movie) {
    return (
      <TouchableHighlight
        underlayColor="rgba(34,26,38,0.1)"
        onPress={()=>this.showMovieDetail(movie)}
      >
      <View style={styles.item}>
        <View style={styles.itemImage}>
          <Image
            source={{uri: movie.images.large}}
            style={styles.image}
          />
        </View>
        <View style={styles.itemContent}>
          <Text style={styles.itemHeader}>{movie.title}</Text>
          <Text style={styles.itemMate}>{movie.original_tile}( {movie.year} )</Text>
          <Text style={styles.itemRange}>{movie.rating.average}</Text>
        </View>
      </View>
      </TouchableHighlight>
    )
  }

  loadMore() {
      fetch(this.requestURL())
        .then(response => response.json())
        .then(responseData => {
          let newStart = responseData.start + responseData.count;
          this.setState({
            movies: [...this.state.movies, ...responseData.subjects],
            start: newStart
          })
        })
        .done()
  }

  onEndReached() {
      console.log(`到底了！ 开始 ${this.state.start}, 总共 ${this.state.total}`)
      if (this.state.total > this.state.start) {
        this.loadMore();
      }
  }

  renderFooter() {
    if (this.state.total > this.state.start) {
      return (
        <View style={{
          marginVertical: 20,
          paddingBottom: 50,
          alignSelf: 'center'
        }}>
          <ActivityIndicator />
        </View>
      )
    }
    else {
      return (
        <View style={{
          marginVertical: 20,
          paddingBottom: 50,
          alignSelf: 'center'
        }}>
          <Text>没有可以显示的内容了 ：）</Text>
        </View>
      )
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView
          renderFooter={this.renderFooter.bind(this)}
          pageSize={this.state.count}
          initialListSize={this.state.count}
          dataSource={this.dataSource.cloneWithRows(this.state.movies)}
          renderRow={this.renderMovieList.bind(this)}
          onEndReached={this.onEndReached.bind(this)}
        />
      </View>
    );

  }
}

export {SearchResult as default}
